* {
    margin: 0;
    padding: 0;
    user-select: none;
    font-size: 1vw;
    // 5: font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    // 4: font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    // 3: font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    // 2: font-family: Arial, Helvetica, sans-serif;
    // 1: font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

html, body {
    /* 防止点击事件延迟触发 */
    touch-action: none;
    /* 防止用户手机调整字体大小 导致页面字体溢出 */
    -webkit-text-size-adjust: 100% !important; /* 覆盖 iOS/Android 默认缩放 */
    -moz-text-size-adjust: 100% !important;    /* Firefox */
    -ms-text-size-adjust: 100% !important;     /* IE/Edge */
    text-size-adjust: 100% !important;         /* 标准语法 */
}

.app-logo {
    --icon-size: contain;
    width: var(--size);
    height: var(--size);
    background-image: url(/Logo-App-1024.png);
    background-size: var(--icon-size);
    background-position: center;
    background-repeat: no-repeat;
}

/* 页面容器 */
.page {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    background-color: #f9fafb;
}

/**
 * 用于图片控制
 * @param {*} --w 宽度
 * @param {*} --h 高度
 * @param {*} --img 图片路径
 */
.img {
    width: var(--w);
    height: var(--h);
    background-image: var(--img);
    background-size: cover;
    background-position: center;
}

/**
 * 用于图标控制
 * @param {*} --w 宽度
 * @param {*} --h 高度
 * @param {*} --icon-size 图片缩放比例
 * @param {*} --icon 图标路径
 */
.icon {
    --icon-size: contain;  /* 默认是完整显示整张图片 */
    width: var(--w);
    height: var(--h);
    background-image: var(--icon);
    background-size: var(--icon-size);
    background-position: center;
    background-repeat: no-repeat;
}

/**
 * 用于两种状态的图标切换控制
 * @param {*} --w 宽度
 * @param {*} --h 高度
 * @param {*} --icon-size 图片缩放比例
 * @param {*} --icon 图标路径
 * @param {*} --active-icon 鼠标移入时的图标路径
 * @description 激活的时候需要手动切换样式
 */
.vicon {
    --icon-size: contain;  /* 默认是完整显示整张图片 */
    width: var(--w);
    height: var(--h);
    background-size: var(--icon-size);
    background-position: center;
    background-repeat: no-repeat;
    position: relative;

    &::before, &::after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    &::before {
        background-image: var(--icon);
        opacity: 1;
    }

    &::after {
        background-image: var(--active-icon);
        opacity: 0;
    }
}

/* 隐藏滚动条的写法 */
.hide-scrollbar {
    -ms-overflow-style: none;  /* IE 10+ */
    scrollbar-width: none;     /* Firefox */

    ::-webkit-scrollbar {
        display: none;             /* Chrome / Safari / Edge / 微信 webview */
    }
}